.layui-m-layer1 .layui-m-layerchild {
  border-radius: 0.16rem !important; }

body {
    background-color: #FFCCB0;
}

.activity-wrapper > ul > li {
  margin: 0 0.4rem 0.4rem 0.4rem;
  overflow: hidden;
  background: #fff;
  border-radius: 0.1066666667rem;
  border: 0.013333333rem solid #fd5f34;  
  box-shadow:  0.053333333rem 0.053333333rem 0.05666666667rem 0.01333333rem rgba(0, 0, 0, 0.15);
}
.title > p{
  width: 100%;
  padding: 0.533333333rem 0rem;
  font-size: 0.32rem;
  text-align: center;
}
.small-eight {
  padding:0.533333333rem 1.6933333333rem 0.533333333rem 0rem !important;
}
.content {
  padding-left: 0.66666666667rem;
  padding-bottom: 0.53333333333rem;
}
.left , .right {
  display: inline-block;
}
.left {
  padding-right: 0.666666666667rem;
  border-right: 0.013333333333rem solid #e5e5e5;
}
.left > h4 {
  color: #dc3838;
  font-size: 0.3733333333rem;
  margin-bottom: 0.2133333333rem;
}
.left > h4 > span {
  font-size: 0.64rem;
  margin-right: 0.056666666667rem;
  font-family: "Din Pro Bold";
}
.left > p , .right > p{
  color: #333333;
  font-size: 0.32rem;
}
.right {
  float: right;
  padding-right: 0.4rem;
}
.right > p {
  padding-top: 0.213333333333rem;
}
.right > p >span {
  display: inline-block;
  margin-left: 0.2133333333rem;
  color: #dc3838;
}
.invest {
  padding: 0.3433333333rem 0.3866666666667rem ;
  background: #FFF5F5;
  color: #dc3838;
}
.invest > div , .invest > img , .invest > a {
  display: inline-block;
}
.invest > div > p {
  font-family: "Din Pro Bold";
  font-size: 0.453333333333rem;
  margin-bottom: 0.1333333333rem;
}
.invest > div > h4 {
  font-size: 0.26666666667rem;
}
.invest > img {
  width: 0.4933333333333334rem;
  height: 0.333333333333334rem;
  /*margin: 0 0.12rem;*/
  position: relative;
  top: -0.15rem;
}
.invest > a {
  font-size: 0;
  float: right;
}
.invest > a > img {
  height: 1.0933333333334rem;
  width: 3.2266666666667rem;
}
.tip {
  float: left;
  background: #dc3838;
  color: #fff;
  font-size: 0rem;
  height: 0.693333333333rem;
  width: 1.693333333333rem;
  text-align: center;
  border-radius: 0.106666667rem 0 0.106666667rem 0;
}
.tip > p {
  font-size: 0.32rem !important;
  line-height: 0.69333333333rem;
  margin-bottom: 0 !important;
}

.first-screen {
  width: 100%;
  height: 6.93rem;
  background: url("../images/app-ban.png") no-repeat center center;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%; 
  position: relative;
}
  .first-screen > .top-pocket-wrapper {
    margin: 0rem 0.2rem;
    width: 9.573333333333333rem;
    height: 12.04rem;
    background: url("../images/bj_hongb1@2x.png") no-repeat center center;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    position: absolute;
    top: 5.15rem;
  }
    .first-screen > .top-pocket-wrapper > .info-wrapper {
      padding-top: 0.9333333333rem; 
    }
      .first-screen > .top-pocket-wrapper > .info-wrapper >p{
        text-align: center;
        font-size:0.43rem;
        color:rgba(253,136,38,1);
        margin-bottom: 0.47rem;
      }
      .first-screen > .top-pocket-wrapper > .info-wrapper >p>span{
        font-size:0.56rem;
        color:#dc3838;
        font-weight: bold;

      }
      .first-screen > .top-pocket-wrapper > .info-wrapper > .money {
        margin: 0.1866666667rem 0 0.2666666667rem 0;
        text-align: center;
        font-size: 0.32rem;
        color: #f77150; }
        .first-screen > .top-pocket-wrapper > .info-wrapper > .money > em {
          font-style: normal;
          font-size: 0.8rem; }
    .first-screen > .top-pocket-wrapper > .avatar-wrapper {
      padding-left: 1.6rem;
      padding-top: 1.3333333333rem;
      padding-bottom: 0.5333333333rem; }
      .first-screen > .top-pocket-wrapper > .avatar-wrapper > .avatar {
        float: left;
        display: inline-block;
        vertical-align: top;
        width: 1.12rem;
        height: 1.12rem;
        border-radius: 50%;
        overflow: hidden; }
        .first-screen > .top-pocket-wrapper > .avatar-wrapper > .avatar > img {
          width: 100%;
          height: 100%; }
      .first-screen > .top-pocket-wrapper > .avatar-wrapper > .user-info {
        padding-left: 0.2133333333rem;
        display: inline-block;
        vertical-align: top;
        line-height: 1.12rem; }
        .first-screen > .top-pocket-wrapper > .avatar-wrapper > .user-info > p {
          line-height: 0.56rem;
          font-size: 0.35rem;
          color: #ffffff; }
          .first-screen > .top-pocket-wrapper > .avatar-wrapper > .user-info > p > .username {
            display: inline-block;
            vertical-align: middle;
            font-size: 0.32rem;
            color: #ffffff; }
          .first-screen > .top-pocket-wrapper > .avatar-wrapper > .user-info > p > .icon-bind-name {
            margin-left: 0.2133333333rem;
            display: inline-block;
            vertical-align: middle;
            width: 1.3866666667rem;
            height: 0.3066666667rem;
            background-image: url("../images/mobile-bind-name@2x.png");
            -webkit-background-size: 100% 100%;
            background-size: 100% 100%; }
            @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
              .first-screen > .top-pocket-wrapper > .avatar-wrapper > .user-info > p > .icon-bind-name {
                background-image: url("../images/mobile-bind-name@3x.png"); } }
          .first-screen > .top-pocket-wrapper > .avatar-wrapper > .user-info > p > .icon-bind-phone {
            margin-left: 0.2133333333rem;
            display: inline-block;
            vertical-align: middle;
            width: 1.3866666667rem;
            height: 0.3066666667rem;
            background-image: url("../images/mobile-bind-phone@2x.png");
            -webkit-background-size: 100% 100%;
            background-size: 100% 100%; }
            @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
              .first-screen > .top-pocket-wrapper > .avatar-wrapper > .user-info > p > .icon-bind-phone {
                background-image: url("../images/mobile-bind-phone@3x.png"); } }
    .first-screen > .top-pocket-wrapper > .input-wrapper {
      padding-bottom: 0.2666666667rem;
      text-align: center;
      font-size: 0; }
      .first-screen > .top-pocket-wrapper > .input-wrapper > input {
    padding-left: 0.4rem;
    font-size: 0.3466666667rem;
    color: #999999;
    width: 7.6rem;
    height: 1.04rem;
    background: rgba(255,255,255,1);
    border-radius: 0.11rem;}
    .first-screen > .top-pocket-wrapper > .form-group {
      margin-bottom: 0.2666666667rem;
      display: flex;
      width: 100%;
      padding: 0 1.04rem 0 0.9866666667rem;
      height: 0.9066666667rem;
      line-height: 0.9066666667rem;
      font-size: 0; }
      .first-screen > .top-pocket-wrapper > .form-group > input {
        flex: 0 0 4.3466666667rem;
        width: 163px;
        padding-left: 0.4rem;
        display: inline-block;
        background-color: #ffffff;
        border-radius: 0.0533333333rem 0 0 0.0533333333rem;
        font-size: 0.3466666667rem;
        color: #999999; }
      .first-screen > .top-pocket-wrapper > .form-group > .phone-text-wrapper {
        flex: 0 0 3.2rem;
        width: 3.2rem;
        height: 100%; }
        .first-screen > .top-pocket-wrapper > .form-group > .phone-text-wrapper > button {
          position: relative;
          width: 100%;
          height: 100%;
          background-color: #fff;
          border-radius: 0 0.0533333333rem 0.0533333333rem 0;
          font-size: 0.3466666667rem;
          color: #dc3838; }
          .first-screen > .top-pocket-wrapper > .form-group > .phone-text-wrapper > button:before {
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -0.2666666667rem;
            content: '';
            width: 1px;
            height: 0.5333333333rem;
            background-color: #e5e5e5; }
    .first-screen > .top-pocket-wrapper > .btn-wrapper {
      padding-top: 0.2133333333rem;
      text-align: center;
      font-size: 0; }
      .first-screen > .top-pocket-wrapper > .btn-wrapper > .btn {
    display: inline-block;
    line-height: 1.04rem;
    text-align: center;
    font-size: 0.4rem;
    color: #cd5013;
    width: 7.6rem;
    height: 1.04rem;
    background: rgba(254,208,0,1);
    border-radius: 0.52rem;
         }

.step-wrapper {
  padding-bottom: 0.3733333333rem;
  margin-top: 8.0533333333rem;
  text-align: center;
  font-size: 0; }
  .step-wrapper > img {
    width: 9.1466666667rem;
    height: 5.3333333333rem; }

.activity-top {
  text-align: center;
  font-size: 0;
}
.activity-top > img {
    width: 100%;
  }

.activity-wrapper {
  width: 100%;
  background-color: #ff8660;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%; 
  padding-bottom: 0.8rem;
}
  .activity-wrapper > .item-wrapper > .item {
    margin: 0 auto 0.1333333333rem;
    width: 9.1466666667rem;
    height: 2.24rem;
    background-color: #fff;
    border-radius: 0.1066666667rem; }
    .activity-wrapper > .item-wrapper > .item > a {
      display: block;
      width: 100%;
      height: 100%; }
      .activity-wrapper > .item-wrapper > .item > a > .item-left {
        float: left;
        position: relative;
        padding-top: 0.64rem;
        display: inline-block;
        text-align: center;
        width: 3.3866666667rem;
        font-size: 0; }
        .activity-wrapper > .item-wrapper > .item > a > .item-left > .plat-tag-wrapper > .plat-tag {
          display: inline-block;
          padding: 0.08rem 0.16rem;
          background-color: #0084ff;
          border-radius: 0.2666666667rem;
          font-size: 0.2666666667rem;
          color: #ffffff; }
        .activity-wrapper > .item-wrapper > .item > a > .item-left > .tag-msg {
          margin-top: 0.16rem; }
          .activity-wrapper > .item-wrapper > .item > a > .item-left > .tag-msg > p {
            line-height: 0.48rem;
            font-size: 0.32rem;
            color: #333333; }
        .activity-wrapper > .item-wrapper > .item > a > .item-left:after {
          content: '';
          position: absolute;
          top: 0.64rem;
          right: 0;
          width: 0.0266666667rem;
          height: 0.96rem;
          background-color: #e5e5e5; }
      .activity-wrapper > .item-wrapper > .item > a > .item-center {
        float: left;
        display: inline-block;
        padding-left: 0.4266666667rem; }
        .activity-wrapper > .item-wrapper > .item > a > .item-center > .item-info-wrapper {
          padding-top: 0.4266666667rem; }
          .activity-wrapper > .item-wrapper > .item > a > .item-center > .item-info-wrapper > li {
            display: flex;
            line-height: 0.48rem; }
            .activity-wrapper > .item-wrapper > .item > a > .item-center > .item-info-wrapper > li > .left {
              flex: 0 0 1.3333333333rem;
              width: 1.3333333333rem;
              font-size: 0.32rem;
              color: #666666; }
            .activity-wrapper > .item-wrapper > .item > a > .item-center > .item-info-wrapper > li > .right {
              padding-left: 0.2666666667rem;
              flex: 1;
              font-size: 0.32rem;
              color: #333333; }
              .activity-wrapper > .item-wrapper > .item > a > .item-center > .item-info-wrapper > li > .right.dc3838 {
                color: #dc3838; }
      .activity-wrapper > .item-wrapper > .item > a > .item-right {
        float: right;
        height: 100%; }
        .activity-wrapper > .item-wrapper > .item > a > .item-right > .btn-wrapper {
          margin-right: 0.32rem;
          height: 100%;
          line-height: 1.6rem; }
          .activity-wrapper > .item-wrapper > .item > a > .item-right > .btn-wrapper > .plat-btn {
            display: inline-block;
            padding: 0.16rem 0.2666666667rem;
            background-color: #dc3838;
            line-height: 0.32rem;
            border-radius: 0.64rem;
            font-size: 0.32rem;
            color: #ffffff; }
  .activity-wrapper .rule-wrapper {
    margin: 0.5333333333rem auto 0;
    width: 9.1466666667rem;
    height: 4.82rem;
    background: url("../images/mobile-rules-bg.png") no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%; }
    .activity-wrapper .rule-wrapper > .text-wrapper {
      padding: 1.3333333333rem 0.2rem 0.4rem 0.4266666667rem; }
      .activity-wrapper .rule-wrapper > .text-wrapper > li {
        line-height: 0.64rem;
        font-size: 0.32rem;
        color: #ff634a; }

/*# sourceMappingURL=m_marketing.css.map */
/*petalbox*/
* {
    margin: 0;
    padding: 0;
}
.header {
    position: relative;
    z-index: 100;
    width: 100%;
    background: #ddd;
    height: 52px;
}
#petalbox {
    position: fixed;
    top: -1.5rem;
    left: 0;
    width: 100%;
    z-index: 98;
    pointer-events: none;
}
#petalbox > div {
    position: absolute;
    -webkit-animation-iteration-count: 1, 1;
    -webkit-animation-direction: normal, normal;
    -webkit-animation-timing-function: linear, ease-in;
    -webkit-backface-visibility: hidden;
    animation-iteration-count: 1, 1;
    animation-direction: normal, normal;
    animation-timing-function: linear, ease-in;
    backface-visibility: hidden;
}
#petalbox > div > img {
    position: absolute;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: linear;
    -webkit-backface-visibility: hidden;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in;
    backface-visibility: hidden;
    width: 75%;
}
@-webkit-keyframes fade {
    0%, 90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fade {
    0%, 90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes drop {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 1100px, 0);
    }
}
@keyframes drop {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, 1100px, 0);
    }
}
@-webkit-keyframes clockwiseSpin {
    0% {
        -webkit-transform: none;
    }
    100% {
        -webkit-transform: rotate(480deg);
    }
}
@keyframes clockwiseSpin {
    0% {
        transform: none;
    }
    100% {
        transform: rotate(480deg);
    }
}
@-webkit-keyframes counterclockwiseSpinAndFlip {
    0% {
        -webkit-transform: none;
    }
    100% {
        -webkit-transform: rotate(-480deg);
    }
}
}
@keyframes counterclockwiseSpinAndFlip {
    0% {
        transform: none;
    }
    100% {
        transform: rotate(-480deg);
    }
}
/*animation*/
.timenav .time_list .time1 {
    -webkit-animation: lantern_shake1 3s linear both;
    -webkit-transform-origin: center top;
    animation: lantern_shake1 3s linear both;
    transform-origin: center top;
}
@-webkit-keyframes lantern_shake1 {
    0%, 50% {
        -webkit-transform: none;
    }
    25% {
        -webkit-transform: rotate(-4deg);
    }
    75% {
        -webkit-transform: rotate(4deg);
    }
}
@keyframes lantern_shake1 {
    0%, 50% {
        transform: none;
    }
    25% {
        transform: rotate(-4deg);
    }
    75% {
        transform: rotate(4deg);
    }
}
.timenav .time_list .time2 {
    -webkit-animation: lantern_shake2 3s linear both;
    -webkit-transform-origin: center top;
    -webkit-backface-visibility: hidden;
    animation: lantern_shake2 3s linear both;
    transform-origin: center top;
}
@-webkit-keyframes lantern_shake2 {
    0%, 50% {
        -webkit-transform: none;
    }
    25% {
        -webkit-transform: rotate(-6deg) translate3d(5px, 0, 0);
    }
    75% {
        -webkit-transform: rotate(6deg) translate3d(-5px, 0, 0);
    }
}
@keyframes lantern_shake2 {
    0%, 50% {
        transform: none;
    }
    25% {
        transform: rotate(-6deg) translate3d(5px, 0, 0);
    }
    75% {
        transform: rotate(6deg) translate3d(-5px, 0, 0);
    }
}
.timenav .time_list .time3 {
    -webkit-animation: lantern_shake3 3s linear both;
    -webkit-transform-origin: center top;
    -webkit-backface-visibility: hidden;
    animation: lantern_shake3 3s linear both;
    transform-origin: center top;
}
@-webkit-keyframes lantern_shake3 {
    0%, 50% {
        -webkit-transform: none;
    }
    25% {
        -webkit-transform: rotate(-8deg) translate3d(14px, 0, 0);
    }
    75% {
        -webkit-transform: rotate(8deg) translate3d(-14px, 0, 0);
    }
}
@keyframes lantern_shake3 {
    0%, 50% {
        transform: none;
    }
    25% {
        transform: rotate(-8deg) translate3d(14px, 0, 0);
    }
    75% {
        transform: rotate(8deg) translate3d(-14px, 0, 0);
    }
}
.timenav .time_list:hover a {
    -webkit-animation: none;
    animation: none;
}
.banner_tit, .banner_subtit {
    -webkit-animation: bounceInDown 0.8s both;
    animation: bounceInDown 0.8s both;
}
.banner_subtit {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}
@-webkit-keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
    }
    60% {
        -webkit-transform: translate3d(0, 25px, 0);
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
    }
    to {
        -webkit-transform: none;
        opacity: 1;
    }
}
@keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);
    }
    60% {
        transform: translate3d(0, 25px, 0);
    }
    75% {
        transform: translate3d(0, -10px, 0);
    }
    90% {
        transform: translate3d(0, 5px, 0);
    }
    to {
        transform: none;
        opacity: 1;
    }
}
.banner_time {
    -webkit-animation: fadeIn 1s 1.2s both;
    animation: fadeIn 1s 1.2s both;
}
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.fireworks i {
    -webkit-animation: fireworkani 1.6s .2s ease both;
    -webkit-animation-iteration-count: 2;
    animation: fireworkani 1.6s .2s ease both;
    animation-iteration-count: 2;
}
.fireworks .f2 {
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}
.fireworks .f3 {
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}
.fireworks .f4 {
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
}
@-webkit-keyframes fireworkani {
    0%, 9% {
        -webkit-transform: scale(.1);
        opacity: 0;
    }
    10% {
        -webkit-transform: scale(.1);
        opacity: 1;
    }
    95% {
        -webkit-transform: scale(.5);
        opacity: .1;
    }
    100% {
        -webkit-transform: scale(.5);
        opacity: 0;
    }
}
@keyframes fireworkani {
    0%, 9% {
        transform: scale(.1);
        opacity: 0;
    }
    10% {
        transform: scale(.1);
        opacity: 1;
    }
    95% {
        transform: scale(.5);
        opacity: .1;
    }
    100% {
        transform: scale(.5);
        opacity: 0;
    }
}
.main_before, .main_after, .main_cont {
    -webkit-animation: contfadein 1s .5s both;
    animation: contfadein 1s .5s both;
}
@-webkit-keyframes contfadein {
    0% {
        -webkit-transform: translate3d(0, 100px, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: none;
        opacity: 1;
    }
}
@keyframes contfadein {
    0% {
        transform: translate3d(0, 100px, 0);
        opacity: 0;
    }
    100% {
        transform: none;
        opacity: 1;
    }
}
/*media*/
.small_window .timenav {
    left: 20px;
    margin-left: 0;
}
.step{
width:9.2rem;
height:5.12rem;
background:rgba(255,255,255,0.9);
opacity:0.01rem;
border-radius: 0.27rem ; 
margin:0.4rem;
}
.step >.step-title{
font-size:0.43rem;
color:rgba(255,99,74,1);
text-align: center;
padding-top: 0.52rem;
}
.step >.step-title:before{
content: "";
background: url("../images/rule-border.png");
width:2.68rem;
height:0.03rem;
background-size: cover;
display: inline-block;
vertical-align: middle;
    margin-right: 0.21rem;
}
.step >.step-title:after{
content: "";
background: url("../images/rule-border.png");
width:2.68rem;
height:0.03rem;
background-size: cover;
display: inline-block;
vertical-align: middle;
transform:rotate(180deg);
-ms-transform:rotate(180deg);   /* IE 9 */
-moz-transform:rotate(180deg);  /* Firefox */
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
-o-transform:rotate(180deg);  /* Opera */
    margin-left: 0.21rem;
}
.step>.step-content{
  margin: 0rem 0.22rem;
  margin-top: 0.47rem;
}
.step>.step-content>ul>li{
float: left;
text-align: center;
width: 28%;
}
.step>.step-content>ul>.tips{
    width: 0.68rem;
    padding-top: 0.6rem;
}
.step>.step-content>ul>.tips>img{
width:0.19rem;
height:0.35rem;
}
.step>.step-content>ul>li:last-child{
margin-right: 0;
}
.step>.step-content>ul>li>.item-icon{
width:1.01rem;
height:1.01rem;
background:rgba(255,255,255,1);
display: inline-block;
border-radius: 50%;
line-height: 1.01rem;
}
.step>.step-content>ul>li>.item-icon>.icon_tixian{
background: url("../images/icon_tixian_nor@2x.png");
width:0.51rem;
height:0.51rem;
background-size: cover;
display: inline-block;
vertical-align: middle;
}
.step>.step-content>ul>li>.item-icon>.icon_touzi{
background: url("../images/icon_touzi_nor@2x.png");
width:0.55rem;
height:0.55rem;
background-size: cover;
display: inline-block;
vertical-align: middle;
}
.step>.step-content>ul>li>.item-icon>.icon_zhuc{
background: url("../images/icon_zhuc_nor@2x.png");
width:0.48rem;
height:0.48rem;
background-size: cover;
display: inline-block;
vertical-align: middle;
}
.step>.step-content>ul>li>p{
  font-size:0.35rem;
color:rgba(243,57,45,1);
line-height: 0.48rem;
    margin-top: 0.21rem;
}
.rule{
width:9.2rem;
height:4.33rem;
background:rgba(255,255,255,0.9);
opacity:0.01rem;
border-radius: 0.13rem ;
margin:0.4rem;
}
.rule >.rule-title{
font-size:0.43rem;
color:rgba(255,99,74,1);
text-align: center;
padding-top: 0.52rem;
}
.rule >.rule-title:before{
content: "";
background: url("../images/rule-border.png");
width:2.68rem;
height:0.03rem;
background-size: cover;
display: inline-block;
vertical-align: middle;
    margin-right: 0.21rem;
}
.rule >.rule-title:after{
content: "";
background: url("../images/rule-border.png");
width:2.68rem;
height:0.03rem;
background-size: cover;
display: inline-block;
vertical-align: middle;
transform:rotate(180deg);
-ms-transform:rotate(180deg);   /* IE 9 */
-moz-transform:rotate(180deg);  /* Firefox */
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
-o-transform:rotate(180deg);  /* Opera */
margin-left: 0.21rem;
}
.rule>.rule-content{
  margin: 0.4rem 0 0 0.4rem;
}
.rule>.rule-content>p{
  font-size:0.32rem;
color:rgba(255,99,74,1);
line-height:0.64rem;
}
.tips{
  text-align: center;
  font-size:0.35rem;
color:rgba(255,245,240,1);
margin-bottom: 1.2rem;
}
/*弹窗*/
.container{
    text-align: center;
    background-color: rgba(0,0,0,0.7);
    position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.hongbao{
    margin: 0 auto;
    background: url("../images/bj_hongbao2@2x.png");
    background-size: cover;
    width: 8.67rem;
    height: 11.55rem;
    position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.hongbao-open{
    width:8.67rem;
    height:11.55rem;
    background:rgba(205,83,61,1);
    border-radius: 0.11rem ; 
    position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden; 
}
.animated {
    -webkit-animation-duration: 0.3s !important;
    animation-duration: 0.3s !important;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.hongbao-open >.close{
    background: url("../images/icon_hbclose_nor@2x.png");
  width:0.35rem; 
  height:0.35rem;
    background-size: cover;
    position: absolute;
    left: 0.4rem;
    top: 0.4rem;
}
.hongbao-open >.open-text{
  text-align: center;
  font-size:0.43rem;
  line-height: 0.64rem;
  padding-top: 1.35rem;
  color:rgba(255,226,177,1);
}
.hongbao-open >.open-content{
  margin-top: 0.56rem;
  height: 100%;
  overflow-y: auto;
  width: 8.8rem;
  -webkit-overflow-scrolling: touch;
}
.hongbao-open >.open-content>ul>li{
  width:7.6rem;
  height:1.91rem;
  background:rgba(255,255,255,1);
  border-radius: 0.11rem ;
  margin: auto;
  margin-bottom: 0.25rem;
}
.hongbao-open >.open-content>ul>li>.open-content-item{
  height: 100%;
}
.open-content-item>.content-item-left{
  width:1.87rem;
  height:0.93rem;
  float: left;
  margin: 0.48rem 0.64rem 0rem 0.33rem;
}
.open-content-item>.content-item-left>img{
  width:100%;
 /*height:100%;*/
}
.open-content-item>.content-item-rgiht{
    float: left;
    margin-top: 0.4rem;
}
.open-content-item>.content-item-rgiht>.pro-bottom-left{
    float: left;
}
.hongbao-open >.login{
    width: 8.67rem;
    height: 1.57rem;
    background: rgba(205,83,61,1);
    position: absolute;
    bottom: 0;
    z-index: 2;
}
.open-content>ul{
      margin-bottom: 5rem
}
.hongbao-open >.login>button{
width:7.6rem;
height:1.04rem;
background:rgba(254,208,0,1);
border-radius: 0.52rem ; 
font-size:0.4rem;
color:rgba(194,82,15,1);
}
.pro-bottom-left:nth-child(2) {
    margin:0.2rem 0rem 0rem 0.7rem;
}
.pro-bottom-left dd{
    font-size: .34rem;
    color: #999;
    margin-bottom: .2rem;
    text-align: center;
}
.pro-bottom-left dd:first-child {
    color: #dc3838;
}
.pro-bottom-left dd i {
    font-style: normal;
    font-size: .64rem;
}
.pro-bottom-left:nth-child(2) dd:first-child {
    font-size: .42rem;
    color: #111;
}
.topcontent{
    width: 100%;
    padding-top: 1.07rem;
    position: relative;
}
.topcontent .close{
  background: url("../images/icon_hbclose_nor@2x.png");
  width:0.35rem; 
  height:0.35rem;
    background-size: cover;
    position: absolute;
    left: 0.4rem;
    top: 0.4rem;
}
.avatar{
    position: relative;
    margin: 0rem 0rem 0.45rem 0rem;
}

#close{
    color: rgba(0,0,0,0.5);
}
.avatar img{
    width:1.33rem;
    height:1.33rem;
}
.topcontent h2{
font-size: 0.43rem;
color: #FFE2B1;
}
.text{
font-size: 0.37rem;
color: #F7C69A;
margin-top: 0.21rem;
}
.description{
font-size:0.59rem;
color:rgba(255,226,177,1);
    margin-top: 1.05rem;
}
#chai{
    display: inline-block;
    background: url("../images/btn_kaihb@2x.png");
    width: 2.67rem;
    height: 2.67rem;
    background-size: cover;
      margin-top: 0.88rem;
}
.rotate{
    -webkit-animation: anim .6s infinite alternate;
        -ms-animation: anim .6s infinite alternate;
            animation: anim .6s infinite alternate;
}
@-webkit-keyframes anim {
    from { -webkit-transform: rotateY(180deg); }
    to { -webkit-transform: rotateY(360deg); }
}
@-ms-keyframes anim {
    from { -ms-transform: rotateY(180deg); }
    to { -ms-transform: rotateY(360deg); }
}
@keyframes anim {
    from { transform: rotateY(180deg); }
    to { transform: rotateY(360deg); }
}
